<template>
    <div class="item">
        <div>
            <div class="item-img">
                <img :src="gdata.stock_info[tabIdx].image" style="opacity: 1;">
            </div>
            <h6>{{gdata.stock_info[tabIdx].title}}</h6>
            <h3 >{{gdata.stock_info[tabIdx].sub_title}}</h3>
            <div class="params-colors">
                <ul class="colors-list">
                    <li 
                        v-for="(itm,idx) in gdata.stock_info" 
                        :key="itm.stock_id"
                        @click="tabIdx=idx"
                    >
                        <a 
                            href="javascript:;" 
                            :class="idx==tabIdx?'active':''"
                            :style="{background:itm.detail.color}"
                        ></a>
                    </li>
                </ul>
            </div>
            <div class="item-btns clearfix">
                <span class="item-gray-btn">
                    <router-link :to="`/detail/${gdata.id}`">查看详情</router-link>
                </span>
                <span class="item-blue-btn" @click="handleAdd">加入购物车</span>
            </div>
            <div class="item-price clearfix">
                <i>¥</i><span>{{gdata.stock_info[tabIdx].price}}</span>
            </div>
            <div class="discount-icon">false</div>
            <div class="item-cover">
                <a href="javascript:;" target="_blank"></a>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        props: {
            gdata: {  //接收某一个商品的数据包
                type: Object,
                required:true
            }
        },
        data() {
            return {
                tabIdx: 0
            }
        },
        computed: {
            ...mapState({
                userInfo:state=>state.my.userInfo
            })
        },
        methods: {
            handleAdd() {
                let {gdata,tabIdx} = this
                // this.$store.commit('cart/cartAddMut',gdata.stock_info[tabIdx])
                if(!this.userInfo){
                    this.$router.push('/login')
                    return
                }
                let obj = gdata.stock_info[tabIdx]
                obj.userid = this.userInfo._id //为购物车数据追加用户id
                this.$store.dispatch('cart/addCartAct',obj)
            }
        },
    }
</script>

<style lang="less" scoped>

</style>